<template>
  <t-form
      ref="form"
      :class="['item-container', `login-${type}`]"
      :data="formData"
      :rules="FORM_RULES"
      label-width="0"
      @submit="onSubmit"
  >
    <template v-if="type == 'password'">
      <t-form-item name="account">
        <t-input v-model="formData.account" size="large" placeholder="请输入账号：">
          <template #prefix-icon>
            <user-icon/>
          </template>
        </t-input>
      </t-form-item>

      <t-form-item name="password">
        <t-input
            v-model="formData.password"
            size="large"
            :type="showPsw ? 'text' : 'password'"
            clearable
            key="password"
            placeholder="请输入登录密码："
        >
          <template #prefix-icon>
            <lock-on-icon/>
          </template>
          <template #suffix-icon>
            <browse-icon v-if="showPsw" @click="showPsw = !showPsw" key="browse"/>
            <browse-off-icon v-else @click="showPsw = !showPsw" key="browse-off"/>
          </template>
        </t-input>
      </t-form-item>
    </template>

    <!-- 扫码登陆 -->
    <!--    <template v-else-if="type == 'qrcode'">-->
    <!--      <div class="tip-container">-->
    <!--        <span class="tip">请使用微信扫一扫登录</span>-->
    <!--        <span class="refresh"-->
    <!--          >刷新-->
    <!--          <refresh-icon color="#0052D9" />-->
    <!--        </span>-->
    <!--      </div>-->
    <!--&lt;!&ndash;   <qrcode-vue value="" :size="192" level="H" />&ndash;&gt;-->
    <!--    </template>-->

    <!--    &lt;!&ndash; 手机号登陆 &ndash;&gt;-->
    <!--    <template v-else>-->
    <!--      <t-form-item name="phone">-->
    <!--        <t-input v-model="formData.phone" size="large" placeholder="请输入您的手机号">-->
    <!--          <template #prefix-icon>-->
    <!--            <user-icon />-->
    <!--          </template>-->
    <!--        </t-input>-->
    <!--      </t-form-item>-->

    <!--      <t-form-item class="verification-code" name="verifyCode">-->
    <!--        <t-input v-model="formData.verifyCode" size="large" placeholder="请输入验证码" key="verifyCode" />-->
    <!--        <t-button variant="outline" :disabled="countDown > 0" @click="handleCounter">-->
    <!--          {{ countDown == 0 ? '发送验证码' : `${countDown}秒后可重发` }}-->
    <!--        </t-button>-->
    <!--      </t-form-item>-->
    <!--    </template>-->

    <t-form-item v-if="type !== 'qrcode'" class="btn-container">
      <t-button block size="large" type="submit"> 登录</t-button>
    </t-form-item>

    <!--    <div class="switch-container">-->
    <!--      <span v-if="type !== 'password'" class="tip" @click="switchType('password')">使用账号密码登录</span>-->
    <!--      <span v-if="type !== 'qrcode'" class="tip" @click="switchType('qrcode')">使用微信扫码登录</span>-->
    <!--      <span v-if="type !== 'phone'" class="tip" @click="switchType('phone')">使用手机号登录</span>-->
    <!--    </div>-->
  </t-form>
</template>
<script lang="ts">
import Vue from 'vue';
// import QrcodeVue from 'qrcode.vue';
import {
  UserIcon, LockOnIcon, BrowseOffIcon, BrowseIcon,
  // RefreshIcon
} from 'tdesign-icons-vue';
import axios from "axios";
import {MessagePlugin} from "tdesign-vue";

const INITIAL_DATA = {
  // phone: '',
  account: '',
  password: '',
  // verifyCode: '',
  // checked: false,
};

const FORM_RULES = {
  // phone: [{ required: true, message: '手机号必填', type: 'error' }],
  account: [{required: true, message: '账号必填', type: 'error'}],
  password: [{required: true, message: '密码必填', type: 'error'}],
  // verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
};
/** 高级详情 */
export default Vue.extend({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Login',
  components: {
    // QrcodeVue,
    UserIcon,
    LockOnIcon,
    BrowseOffIcon,
    BrowseIcon,
    // RefreshIcon,
  },
  data() {
    return {
      FORM_RULES,
      type: 'password',
      formData: {...INITIAL_DATA},
      showPsw: false,
      // countDown: 0,
      // intervalTimer: null,
    };
  },
  // beforeDestroy() {
  //   clearInterval(this.intervalTimer);
  // },
  methods: {
    // switchType(val) {
    //   this.type = val;
    //   this.$refs.form.reset();
    // },
    onSubmit() {
      axios.post("/api/admin/emp/login", {
        empAccount: this.formData.account,
        empPassword: this.formData.password
        // empPassword: md5(this.emp.empPassword + this.salt)
      })
          .then(res => {
            if (res.data.code == 200) {
              MessagePlugin.success('登录成功');
              //跳转
              this.$router.push("/dashboard");
              //把token存起来
              localStorage.setItem("token", res.data.data);
            } else if (res.data.code == 201) {
              MessagePlugin.error('账号或密码不正确');

            } else if (res.data.code == 202) {
              MessagePlugin.error('账号异常');
            }
          });
    },
    // handleCounter() {
    //   this.countDown = 60;
    //   this.intervalTimer = setInterval(() => {
    //     if (this.countDown > 0) {
    //       this.countDown -= 1;
    //     } else {
    //       clearInterval(this.intervalTimer);
    //       this.countDown = 0;
    //     }
    //   }, 1000);
    // },
  },
});
</script>
